<template>
  <pro-card
    v-loading="isFetching"
    shadow="never"
  >
    <pro-crud
      v-model="form"
      v-model:search="query"
      v-model:current-page="page"
      v-model:page-size="limit"
      :columns="columns"
      :menu="menu"
      :data="list"
      :detail="form"
      :total="total"
      :rules="rules"
      :before-open="beforeOpen"
      border
      stripe
      label-width="100px"
      layout="total, ->, jumper, prev, pager, next, sizes"
      @search="search"
      @submit="submit"
      @delete="deleteRow"
      @load="loadList"
      @search-reset="loadList"
    >
      <template #table-tag="{ row, size }">
        <el-tag
          v-for="(item, index) in row.tag"
          :key="index"
          :size="size"
          class="tag-item"
        >
          {{ item }}
        </el-tag>
      </template>
      <template #detail-tag="{ item, size }">
        <el-tag
          v-for="(v, i) in item.tag"
          :key="i"
          :size="size"
          class="tag-item"
        >
          {{ v }}
        </el-tag>
      </template>
    </pro-crud>
  </pro-card>
</template>
  
  <script setup lang="ts">
  import type { BillItem, BillForm, BillQuery } from '../../types/index'
  
  const {
    query,
    form,
    isFetching,
    page,
    limit,
    total,
    list,
    beforeOpen,
    search,
    loadList,
    submit,
    deleteRow,
  } = useCrud<BillItem, BillForm, BillQuery>({ url: Api.bill })
  
  const menu = defineCrudMenuColumns({ label: '操作' })

  const columns = defineCrudColumns<BillItem>([
    {
      label: 'ID',
      prop: 'id',
    },
    {
      label: '付款名称',
      prop: 'name',
      component: markRaw(ElInput),
      search: true,
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入名称',
      }),
    },
    {
      label: '付款金额',
      prop: 'amount',
      component: markRaw(ElInput), 
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入付款金额',
      }),
    }, 
    {
      label: '到账金额',
      component: markRaw(ElInput), 
      form: true,
      detail: true,
      prop: 'arriveAmount', 
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        type:Number,
        validator: (value: number) => {
          const regex = /^\d+(\.\d{1,2})?$/  // 正则表达式匹配数字和最多两位小数
          
          return regex.test(value) 
        },
        placeholder: '请输入到账金额',
      }),
    },
    {
      label: '付款单位',
      prop: 'unitPay',
      component: markRaw(ElInput), 
      form: true, 
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入付款单位名称',
      }),
    },  
    {
      label: '收款单位',
      prop: 'unitReceive',
      component: markRaw(ElInput),
      search: true,
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入收款单位名称',
      }),
    }, 
    {
      label: '付款方式',
      prop: 'payType',
      component: markRaw(ProSelect), 
      form: true,
      detail: true,
      props:  {
        data: [{
  label: '现金',
  value: 1
},{
  label: '转账',
  value: 2
},{
  label: '支票',
  value: 3
} ], // 这里不要通过 `catesList.value` 解构响应式数据
        clearable: true,
        placeholder: '请选择分类',
        style: 'width:100%',
      },
    }, 
    {
      label: '备注',
      prop: 'remark',
      component: markRaw(ElInput), 
      form: true,
      detail: true,
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入备注',
      }),
    }, 
    {
      label: '创建人名称',
      component: markRaw(ElInput),
      search: true,
      prop: 'createByName',
      props: defineComponentProps<typeof ElInput>({
        clearable: true,
        placeholder: '请输入创建人名称',
      }),
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
  ])
  const rules = {
    name: { required: true, message: '请输入付款名称', trigger: 'blur' },
    amount: { required: true, message: '请输入付款金额', trigger: 'blur' },
    unitReceive: { required: true, message: '请输入收款单位', trigger: 'blur' },
    payType: { required: true, message: '请输入付款方式', trigger: 'blur' },
  }
  </script>
  
  <style scoped>
  .tag-item:nth-child(n + 2) {
    margin-left: 6px;
  }
  </style>
  